<!--修改密码页面-->
<!--<template>
  <div>

  <el-row>
    <el-col>
        手机号:
        <el-input v-model="UpDatePasswordDTO.cellphone" placeholder="请输入和该账号绑定的手机号"
                  style="width: 200px"></el-input>
        <el-button
          v-model="UpDatePasswordDTO"
          :disabled="disable"
          size="mini"
          type="primary"
          @click="sendCode"
        >{{ buttonName }}
        </el-button>

    </el-col>
  </el-row>
    <el-row>
      <el-col>
        <el-input v-model="UpDatePasswordDTO.code" placeholder="请输入验证码" style="width: 200px"></el-input>

      </el-col>
    </el-row>
    <el-row>
      <el-col>
        <el-input v-model="UpDatePasswordDTO.newPwd" placeholder="请输入新密码" style="width: 200px"></el-input>
      </el-col>
    </el-row>
    <el-row>
      <el-col>
        <el-button v-model="UpDatePasswordDTO" type="primary" @click="updatePwd">确认</el-button>
      </el-col>
    </el-row>
  </div>

</template>-->
<template>
  <div class="centered-container">
    <el-row class="form-row">
      <el-col>
        手机号:
        <el-input v-model="UpDatePasswordDTO.cellphone" placeholder="请输入和该账号绑定的手机号" style="width: 200px"></el-input>
      </el-col>
      <el-col>
        <el-button
          v-model="UpDatePasswordDTO"
          :disabled="disable"
          size="medium"
          type="success"
          round
          @click="sendCode"
        >发送验证码</el-button>
      </el-col>
    </el-row>

    <el-row class="form-row">
      <el-col>
        验证码:
        <el-input v-model="UpDatePasswordDTO.code" placeholder="请输入收到的验证码" style="width: 200px"></el-input>
      </el-col>
    </el-row>

    <el-row class="form-row">
      <el-col>
        新密码:
        <el-input v-model="UpDatePasswordDTO.newPwd" placeholder="请输入新密码" style="width: 200px"></el-input>
      </el-col>
    </el-row>

    <el-row class="form-row">
      <el-col>
        <el-button
          size="medium"
          type="primary"
          round
          @click="updatePwd"
        >确认修改</el-button>
      </el-col>
    </el-row>
  </div>
</template>

<script>

export default {
  data() {
    return {
      UpDatePasswordDTO: {
        account: '',
        cellphone: '',
        code: '',
        newPwd: ''
      },
      //发送验证码
      buttonName: "获取验证码",
      count: 120,
      disable: false,
    }
  },
  methods: {
    sendCode() {
      this.$axios.post("/purchase/buyDemand/sendCode", this.UpDatePasswordDTO).then(res => {
        if (res.data.code !== 200) {
          this.$message.error(res.data.msg)
          return
        }
        this.$message.success(res.data.msg)

        var timeout = setInterval(() => {
          if (this.count < 1) {
            this.disable = false;
            this.buttonName = "获取验证码";
            this.count = 120;
            clearInterval(timeout);
          } else {
            this.disable = true;
            this.buttonName = this.count-- + "s后重发";
          }
        }, 1000);
      })


    },
    updatePwd() {
      this.$axios.post("/purchase/buyDemand/checkCode", this.UpDatePasswordDTO).then(res => {
        if (res.data.code !== 200) {
          this.$message.error(res.data.msg)
          return
        }
        this.$message.success(res.data.msg)
        localStorage.removeItem('access_token')
        this.$router.push("/")

      })
    }
  }
}
</script>
<style>
.centered-container {
  display: flex;
  justify-content: center;
  flex-direction: column;
  align-items: center;
  height: 50vh; /* 可根据需要调整容器高度 */
}
</style>
